﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>跟我走吧</title>
		<meta name="keywords" content="彩虹,彩虹的尽头是宝藏"/>
		<meta name="description" content="彩虹,彩虹的尽头是宝藏"/>
		<link href="static/love/css/default.css" type="text/css" rel="stylesheet">
		<script type="text/javascript" src="static/love/js/jquery.js"></script>
		<script type="text/javascript" src="static/love/js/garden.js"></script>
		<script type="text/javascript" src="static/love/js/functions.js"></script>
		<style>
		@font-face {
			font-family: digit;
			src: url('static/love/founts/digital-7_mono.ttf') format("truetype");
		}
		</style>
	</head>
	<body>
		<div id="mainDiv">
			<div id="content">
				<div id="code">
					<span class="comments">/**</span><br />
					<span class="comments">*2019—05-02,我们相识;</span><br />
					<span class="comments">*2019-07-12,我们相爱;</span><br />
					<span class="comments">*2023-07-29,我们定下婚约;</span><br />
					<span class="comments">*2023-10-03,我们步入婚姻，从此两人三餐四季;</span><br />
					<span class="comments">*/</span><br />
					<br/>
					<span class="comments">跟我走吧，忐忑给你，情书给你; </span><br />
					<span class="comments">不眠的夜给你，四月的清晨给你; </span><br />
					<span class="comments">雪糕的第一口给你，海底捞最后一颗鱼丸给你; </span><br />
					<span class="comments">手给你，怀抱给你，车票给你; </span><br />
					<span class="comments">跋涉给你，等待给你，钥匙给你，家给你; </span><br />
					<span class="comments">一腔孤勇和余生六十年，全都给你; </span><br />
					<br/>
					I want to say:<br />
					Baby, I love you forever;<br />
					未来待续......
				</div>
				<div id="loveHeart">
					<canvas id="garden"></canvas>
					<div id="words">
						<div id="messages">
							亲爱的，这是我们相爱的时光。
							<div id="elapseClock"></div>
						</div>
						<div id="loveu">
							爱你直到永永远远。<br/>
							<div class="signature">- 爱你的我</div>
						</div>
					</div>
				</div>
			</div>
			<div id="copyright">
				<a href="#">......</a><br />
				<a href="#">......</a><br />
				<audio id="cengJingDeNi" style="display: none;" controls autoplay loop>
					<source src="static/love/mp3/ceng_jing_de_ni.mp3">
				</audio>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		const loveHeart = $("#loveHeart");
		const copyright = $("#copyright");
		const offsetX = loveHeart.width() / 2;
		const offsetY = loveHeart.height() / 2 - 55;
		const together = new Date();
		together.setFullYear(2019, 6, 10);//以那天的阴历开始算
		together.setHours(0);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);

		if (!document.createElement('canvas').getContext) {
			const msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			copyright.css("position", "absolute");
			copyright.css("bottom", "10px");
			document.execCommand("stop");
		} else {
			setTimeout(function () {
				startHeartAnimation();
			}, 5000);

			timeElapse(together);
			setInterval(function () {
				timeElapse(together);
			}, 500);

			adjustCodePosition();
			$("#code").typewriter();
		}
	</script>

	<script>
		$(document).ready(function() {
			var cengJingDeNi = $("#cengJingDeNi");
			// 当音频准备好后自动播放
			cengJingDeNi.oncanplaythrough = function() {
				console.log("play1");
				cengJingDeNi.play();
			};
			// 检测音频是否已经加载完毕
			if (cengJingDeNi.readyState >= 2) {
				// 已加载完毕，直接播放
				console.log("play2");

				cengJingDeNi.play();
			} else {
				// 音频还未加载完毕，等待加载完成后再播放
				cengJingDeNi.onloadedmetadata = function() {
					console.log("play3");
					cengJingDeNi.play();
				};
			}
		});
	</script>
</html>